<!--
* @FileDescription: 柱状图页面
* @Author: yuec621@outlook.com
* @Date: 2024-11-10 12:39:47
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2025-05-15 09:39:00
-->
<template>
    <div class="pagestyle">
        <noDataChartCom v-if="state.nodataShow" @toolChange="toolChange" :searListData="state.searList"
            :lineConParams="state.lineConParams" :attrObj="state.attrObj" configtitle="柱状图"></noDataChartCom>
        <div v-else>
            <div class="cardBox"
                :style="{backgroundColor:state.attrObj&&state.attrObj.chartBg?state.attrObj.chartBg:'#fff'}">
                <toolCom @toolChange="toolChange" :totaltoolList="state.totaltoolList"
                    :showToolList="state.showToolList" :lineConParams="state.lineConParams" :searList="state.searList"
                    :chartType="2" :barLegendShow="true" :timeRange="state.timeRangevalue"
                    :lengedList="state.lengedList" :formatValue="true" :attrObj="state.attrObj">
                    <template v-slot:toolComTitle>
                        柱状图配置
                    </template>
                </toolCom>
                <div v-loading="state.loading">
                    <barCom :chartList="state.chartList" :attrObj="state.attrObj"></barCom>
                </div>
            </div>
            <div class="cardBox">
                <chartTable v-if="!state.drawerShow" :curdShow="true" :tabList="state.tabList"
                    :tabledata="state.tableData" :tableheadsValue="state.options.tableheads" :listSS="state.listSS">
                    <template v-slot:tabBoxList="row">
                        <span class="hover" style="background-color:
                     transparent;text-align: left" v-for="item in state.tabList">{{ item.name }}</span>
                    </template>
                    <template v-slot:listSS="{row,field}">
                        <span v-if="field=='pointValueStr'">
                            <el-tag
                                :type="row.pointValueStr.includes('无')||row.pointValueStr.includes('停')?'warning':'success'">
                                {{row.pointValueStr}}</el-tag>
                        </span>
                    </template>
                    <template v-slot:opraCurdBtn="row">
                        <el-button type="text" @click="lookLineClick(row.row)">查看详情</el-button>
                    </template>
                </chartTable>
                <chartTable v-else :curdShow="false" :tabList="state.tabListtwo" :tabledata="state.tableDataTwo"
                    :tableheadsValue="state.optionsTwo.tableheads" :key="state.tabListtwo"
                    :pageconfig="state.pageconfig" @pagechangeSize="pagechangeSize" @pagechange="pagechange">
                    <template v-slot:tabBoxList="row">
                        <span class="hover" style="background-color:
                     transparent;text-align: left;font-size: 12px;display: flex;align-items: center;"
                            v-for="item in state.tabListtwo">
                            <span style="font-size: 14px;min-width: auto;
                     color: rgba(68, 136, 255, 1);display: flex;align-items: center;" @click="returnClick()">
                                <svg-icon style="fill: rgba(68, 136, 255, 1) !important;" icon-class="chexiao" />
                                返回</span>
                            详情</span>
                    </template>
                </chartTable>
            </div>
        </div>
    </div>
</template>
<script setup>
    import toolCom from "./chartCom/toolCom.vue";
    import barCom from "./chartCom/barCom.vue";
    import chartTable from "./chartCom/chartTable.vue";
    import noDataChartCom from "./chartCom/noDataChartCom.vue";
    import {
        computed,
        onMounted,
        reactive
    } from "vue";
    import {
        table_headers
    } from '@/components/commonCom/table_headers';
    import axios from "@/utils/request"
    import usePagesStore from '@/store/modules/pages'
    import dayjs from 'dayjs'
    const {
        proxy
    } = getCurrentInstance();
    const store = usePagesStore()
    const router = useRouter();
    let previewHttps =
        import.meta.env.VITE_APP_HTTP
    let colors = ["rgba(80, 196, 204, 1)", "rgba(84, 134, 204, 1)", "rgba(153, 108, 245, 1)",
        "rgba(69, 209, 134, 1)"
    ]

    let state = reactive({
        loading:false,
        pageconfigdetail: {},
        pageconfig: {
            currentPage: 1,
            pageSize: 10,
            total: 0
        },
        nodataShow: false,
        showToolList: false, //查看曲线展示前一条后一条
        yinziList: [],
        tabList: [{
            type: 1,
            name: '列表',
            tableData: []
        }],
        tabListtwo: [{
            type: 1,
            name: '列表',
            tableData: []
        }],
        type: 1,
        tableData: [],
        options: {
            tableheads: computed(() => table_headers.hisSwitchOpenTable),
            dataUrl: '/pointData/hisSwitchOpenTable'
        },
        optionsTwo: {
            tableheads: computed(() => table_headers.hisSwitchOpenTableDetail),
            dataUrl: '/pointData/hisSwitchOpenTableDetail'
        },
        tableDataTwo: [],
        drawerShow: false,
        queryStartDate: undefined,
        queryEndDate: undefined,
        totaltoolList: [{
            name: '今',
            icon: 'jintian',
            type: 0,
            selname: '取消今日',
            show: true
        }, {
            name: '前一天',
            icon: 'qianyitian',
            type: 1,
            selname: '取消前一天',
            show: true
        }, {
            name: '后一天',
            icon: 'houyitian',
            type: 2,
            selname: '取消后一天',
            show: true
        }, {
            name: '事件日历',
            icon: 'rilishijian',
            type: 3,
            selname: '取消事件日历',
            show: true,
            disabled: true
        }, {
            name: '显示圆点',
            icon: 'yuandian',
            type: 4,
            selname: '取消显示圆点',
            show: true,
            disabled: true
        }, {
            name: '标尺',
            icon: 'biaochi',
            type: 5,
            selname: '取消标尺',
            show: true,
            disabled: true
        }, {
            name: '游标',
            icon: 'youbiao',
            type: 6,
            selname: '取消游标',
            show: true,
            disabled: true
        }, {
            name: '框选',
            icon: 'kuangxuan',
            type: 7,
            selname: '取消框选',
            show: true,
            disabled: true
        }, {
            name: '纵向放大',
            icon: 'zongxiangfangda',
            type: 10,
            selname: '取消纵向放大',
            show: true,
            disabled: true
        }],
        lineConParams: {
            type: 'D',
            pointUrl: "/simulate/history/attainPoints", //获取测点列表
            addTemSave: '/switch/template/add', //新增模板接口
            tempList: '/switch/template/list', //模板列表接口
            delTemp: '/switch/template/del', //删除模板接口
            hisSearchSave: '/point/history/add', //新增历史查询接口
            hisSearchList: '/point/history/list', //查询历史查询接口
            hisSearchDel: '/point/history/del', //删除历史查询接口
        },
        searList: [{
                label: "时间范围",
                id: "time",
                descList: [{
                    label: "时间范围",
                    type: "timeRangepage",
                    col: 24,
                    bindData: undefined,
                    field: "timeRange"
                }],
            },
            {
                label: "测点信息",
                id: "pointLocal",
                descList: [{
                    label: "传感器名称",
                    type: "select",
                    col: 24,
                    bindData: undefined,
                    options: [],
                    judcond: 'sensorchoiceName', //判断条件
                    field: 'choiceName',
                    fieldT: 'sensorName'
                }, ],
            },
            {
                label: "地点区域",
                id: "area",
                descList: [{
                        label: "所在区域",
                        type: "cascadercheckStrictly",
                        col: 24,
                        bindData: undefined,
                        options: [],
                        field: 'areaId',
                        fieldT: 'areaName',
                        judcond: 'areaName', //判断条件
                        props: {
                            children: "childList",
                            value: "id",
                            label: "areaName",
                            checkStrictly: true,
                            emitPath: false,
                        },
                    },
                    {
                        label: "安装地点",
                        type: "select",
                        col: 24,
                        bindData: undefined,
                        options: [],
                        field: "placeName",
                        judcond: 'placeName', //判断条件
                    },
                ],
            },
        ],
        pointIdList: [],
        splitNumber: 10,
        attrList: [],
        attrObj: undefined,
        listSS: [{
            field: "pointValueStr"
        }],
        timeRangevalue: [],
        lengedList: []
    })

    // 获取曲线图数据
    function getList(startTime, endTime) {
        state.loading=true
        axios.post('/pointData/hisSwitchOpen', {
            pointIds: state.pointIdList,
            queryStartDate: dayjs(startTime).format('YYYY-MM-DD'),
            queryEndDate: dayjs(endTime).format('YYYY-MM-DD')
        }).then(res => {
            if (res.data.length > 0) {
                res.data.forEach(item => {
                    if (item.hisSwitchOpens.length > 0) {
                        item.hisSwitchOpens.forEach(itemtwo => {
                            state.lengedList.forEach(itemsub => {
                                if (itemtwo.pointId == itemsub.pointId) {
                                    itemtwo.lineColor = itemsub.maxlineColor
                                }
                            })
                        })
                    }
                })
            }
            state.chartList = res.data
            state.loading=false
        })
    }
    // 获取表格数据
    function getTableList(startTime, endTime) {
        axios.post('/pointData/hisSwitchOpenTable', {
            pointIds: state.pointIdList,
            queryStartDate: dayjs(startTime).format('YYYY-MM-DD'),
            queryEndDate: dayjs(endTime).format('YYYY-MM-DD')
        }).then(res => {
            state.tableData = res.data
        })
    }
    // 详情
    function getTabledescList(row) {
        axios.post('/pointData/hisSwitchOpenTableDetail', {
            pointId: state.pageconfigdetail.pointId,
            queryStartDate: state.pageconfigdetail.startTime,
            queryEndDate: state.pageconfigdetail.endTime,
            pageNum: state.pageconfig.currentPage,
            pageSize: state.pageconfig.pageSize
        }).then(res => {
            state.pageconfig.total = res.data.total
            state.tableDataTwo = res.data.list
        })
    }

    function pagechangeSize(val) {
        state.pageconfig.currentPage = 1
        state.pageconfig.pageSize = val
        getTabledescList()
    }

    function pagechange(val) {
        getTabledescList()
    }
    // 头部操作工具栏事件
    async function toolChange(val) {
        if (val.type == 'dateType') {
            if (val.data && val.data.length > 0) {
                let startTime = dayjs(val.data[0]).format('YYYY-MM-DD HH:mm:ss')
                let endTime = dayjs(val.data[1]).format('YYYY-MM-DD HH:mm:ss')
                state.timeRangevalue = [startTime, endTime]
                state.queryStartDate = startTime
                state.queryEndDate = endTime
                if (state.pointIdList.length > 0) {
                    localStorage.setItem('barChart', JSON.stringify({
                        pointIds: state.pointIdList,
                        startTime: startTime,
                        endTime: endTime,
                        lengedList: state.lengedList,
                        attrObj: state.attrObj
                    }))
                    await getList(startTime, endTime)
                    await getTableList(startTime, endTime)
                } else {
                    proxy.$modal.msgWarning('请选择所要查询的测点编号!');
                }
            } else {
                proxy.$modal.msgWarning('请选择所要查询时间范围!');
            }
        } else if (val.type == 'legend') {
            state.attrList = val.data
            state.attrObj = val.attrObj
            state.lengedList = val.data.map((item, index) => {
                item.maxlineColor = colors[index]
                return item
            })
            state.pointIdList = val.data.map(item => {
                return item.pointId
            })
        } else if (val.type == 'legendshow') {
            console.log("柱状图柱状图");
            state.lengedList = val.data.map((item, index) => {
                item.maxlineColor = colors[index]
                return item
            })
            state.pointIdList = val.data.map(item => {
                return item.pointId
            })
            state.nodataShow = false
        }
    }
    // 查看曲线按钮
    function lookLineClick(row) {
        state.pageconfigdetail = row
        state.drawerShow = true
        getTabledescList(row)
    }

    function returnClick() {
        state.drawerShow = !state.drawerShow
    }
    const props = defineProps({
        fromIndexpointId: Object
    })
    onMounted(() => {
        // localStorage.removeItem('barChart')
        let hisChartStore = JSON.parse(localStorage.getItem('barChart'))
        if (hisChartStore != null) {
            state.nodataShow = false
            state.pointIdList = hisChartStore.lengedList.map(item => {
                return item.pointId
            })
            state.lengedList = hisChartStore.lengedList.map((item, index) => {
                item.maxlineColor = colors[index]
                return item
            })
            if (hisChartStore.attrObj) {
                state.attrObj = hisChartStore.attrObj
            }
            state.timeRangevalue = [hisChartStore.startTime, hisChartStore.endTime]
            getList(hisChartStore.startTime, hisChartStore.endTime)
            getTableList(hisChartStore.startTime, hisChartStore.endTime)
        } else {
            if (props.fromIndexpointId) {
                state.nodataShow = false
                state.pointIdList = [props.fromIndexpointId.pointId]
                state.timeRangevalue = [dayjs().format('YYYY-MM-DD'), dayjs().add(1, 'day').format(
                    'YYYY-MM-DD')]
                getList(state.timeRangevalue[0], state.timeRangevalue[1])
                getTableList(state.timeRangevalue[0], state.timeRangevalue[1])
            } else {
                state.nodataShow = true
            }
        }
    })
</script>
<style lang="scss" scoped>
    .pagestyle {
        overflow-y: auto;

        .cardBox {
            padding: 10px;
            margin: 10px;
            border-radius: 8px;
            margin-top: 10px;
            background-color: rgba($color: #ffffff, $alpha: .6)
        }
    }
</style>